<template>
	<view class="content">
		<r-canvas ref="rCanvas"></r-canvas>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	export default {
		components: {
			rCanvas
		},
		onReady() {
			this.$nextTick(async () => {
				uni.showLoading({
					title:'绘制中',
					mask:true
				})
				let that = this
				await this.$refs.rCanvas.init({
					canvas_id: 'rCanvas',
					background_color: '#fff',
					canvas_width:375,
					canvas_height:580,
					scale:2
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawText({
					text: '我的年度关键词',
					x: 190,
					y: 40,
					font_size:20,
					text_align:'center',
					font_family:'"PingFang SC",Arial,simsun,sans-serif',
					font_weight:'bold',
					font_color: 'rgba(88,88,88,0.9)'
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawText({
					text: '智能预测2080',
					x: 190,
					y: 64,
					font_size:14,
					text_align:'center',
					font_color: 'rgba(88,88,88,0.9)'
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawImage({
					url: '/static/example1/cover.png',
					x: 20,
					y: 90,
					w: 335,
					h: 335,
					border_radius:4
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawText({
					text: '远方',
					x: 190,
					y: 480,
					font_size:40,
					text_align:'center',
					font_family:'PingFang SC, "Microsoft JhengHei", "Microsoft YaHei"',
					font_weight:'bold',
					font_color: 'rgba(88,88,88,0.9)'
				}).catch(err=>{
					this.error(err)
				})
				
				await this.$refs.rCanvas.drawText({
					text: '2080年你会去看更多的风景。生活不是赶路，而是去感受路。',
					x: 190,
					y: 520,
					font_size:16,
					max_width:300,
					line_height:20,
					text_align:'center',
					font_family:'"PingFang SC",Arial,simsun,sans-serif',
					font_weight:'bold',
					font_color: 'rgba(88,88,88,0.9)'
				}).catch(err=>{
					this.error(err)
				})

				// 生成海报
				await this.$refs.rCanvas.draw((result) => {
					uni.hideLoading()
					uni.showModal({
						title:'提示',
						content:'是否下载当前生成的海报？',
						success:(res)=>{
							if(res.confirm){
								// 保存图片
								this.$refs.rCanvas.saveImage(result.tempFilePath).catch(err=>{
									this.error(err)
								})
							}
						}
					})
					
				}).catch(err=>{
					this.error(err)
				})
			})
		},
		methods:{
			error(msg){
				uni.showModal({
					title:'错误信息',
					content:msg,
					showCancel:false
				})
			}
		}
	}
</script>

<style>
page{
	background:rgb(245,245,245);
}	
</style>
